<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!--第一种绑定监听事件-->
      <!--<TodoHeader @addTodo="addTodo"/> &lt;!&ndash;给TodoHeader标签对象绑定addTodo事件监听&ndash;&gt;-->
      <TodoHeader ref="header"/> <!--第二种使用mounted 绑定监听事件-->
      <TodoList :todos="todos" />
      <!--<todo-footer :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAllTodos="selectAllTodos"/>-->
      <todo-footer>
        <input type="checkbox" v-model="isAllCheck" slot="checkAll"/>
        <span slot="count">已完成{{completeSize}}/ 全部{{todos.length}}</span>
        <button slot="delete" class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>
      </todo-footer>
    </div>
  </div>
</template>
<!--
绑定事件监听----订阅消息
触发事件 ---- 发布消息
-->
<script>
  import PubSub from 'pubsub-js'
  import TodoHeader from './components/TodoHeader.vue'
  import TodoList from './components/TodoList.vue'
  import TodoFooter from './components/TodoFooter.vue'
  import storageUtil from './util/storageUtil.js'
  export default {
    data(){
      return{
        // 从localstorage 读取todos
        //JSON字符串解析为数组
        // todos:JSON.parse(window.localStorage.getItem(todos_key) || '[]')
        todos:storageUtil.readTodos()
      }
    },
    mounted(){//执行异步代码
    //  给<TodoHeader/>绑定addTodo事件监听
     //this.$on('addTodo',this.addTodo)//给App绑定的监听
      this.$refs.header.$on('addTodo',this.addTodo)

      //订阅消息这种写法不对因为this指代的是PubSub这个对象
      // PubSub.subscribe('deleteItem',function(msg,index){
      // this.deleteItem(index)
      //
      // })
      PubSub.subscribe('deleteItem',(msg,index)=>{
        this.deleteItem(index)

      })

    },
    watch:{//监视
      todos:{
        deep:true,//深度监视
        // handler:function(value){
        // //  将todos最新的值，保存到localStorage
        // //  将数组转换为JSON字符串
        //window.localStorage.setItem(todos_key,JSON.stringify(value))
        //   storageUtil.saveTodos(value)
        // }
        handler:storageUtil.saveTodos
      }
    },
    computed:{
      completeSize(){
        return this.todos.reduce((preTotal,todo)=>preTotal+(todo.complete?1:0),0)
      },
      isAllCheck:{
        get(){
          //已完成的数量如果和全部的数量相等就全选
          return this.completeSize===this.todos.length && this.completeSize>0
        },
        set(value){
          this.selectAllTodos(value)
        }
      }
    },
    //数据在哪里更新的行为就在哪里
    methods:{
      addTodo(todo){
        this.todos.unshift(todo)
      },
      deleteItem(index){
        this.todos.splice(index,1)
      },
      //删除所有选中的todo
      deleteCompleteTodos(){
       this.todos= this.todos.filter(todo=>!todo.complete)
      },
      //全选，全不选
      selectAllTodos(check){
        this.todos.forEach(todo=>todo.complete=check)
      }
    },
    components:{
      TodoHeader,
      TodoList,
      TodoFooter
    }
  }
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>
